<template>
  <div id="relation-order-info">
    <div class="order-info">
      <p>关联订单号：{{ details.orderNo || "--" }}</p>
      <p>来源平台：{{ details.platformLabel || "--" }}</p>
    </div>
    <div class="googs-sku-list">
      <template v-if="details.list && details.list.length > 0">
        <p v-for="(item, index) in details.list">
          <span>{{ index + 1 }}</span>
          <span @click="onCopySku(item.goodsSkuNo)">SKU:{{ item.goodsSkuNo }}</span>
          <span>商品名称：{{ item.goodsName }}</span>
          <span>商品规格*数量：{{ item.skuName }}*{{ item.quantity }}</span>
          <span>商品单价：{{ item.unitPrice }}</span>
          <span>商品合计：{{ item.subtotal }}</span>
        </p>
      </template>
      <template v-else>
        <p class="nothing"> SKU暂无数据 </p>
      </template>
    </div>
    <div class="total">订单总额：<span>￥{{ details.totalAmount }}</span></div>
  </div>
</template>

<script>
export default {
  name: 'relationOrderInfo',
  props: {
    type: {
      type: String,
      default: 'closeOrder'
    },
    afterId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      details: {},
      totalAmount: 0,
      warehouseList: [],
      rQuery: {}
    }
  },
  computed: {},
  watch: {
    $route: {
      handler: function (query) {
        this.query = query
        if (query.orderNo) {
          this.getRelationOrderInfo(query.orderNo)
        }
      },
      immediate: true
      // deep: true
    },
  },
  created () {
    const rQuery = this.$route.query
    this.rQuery = rQuery
    if (rQuery.orderNo) {
      this.getRelationOrderInfo(rQuery.orderNo)
    }
  },
  methods: {
    getRelationOrderInfo (orderNo) {
      const params = { id: orderNo }
      this.$api.matrixOrderDetail(params).then((res) => {
        this.details = res.data
        this.details.list = res.data.details
      }).catch((err) => {
        console.log(err)
      })
    },
    // 复制 KSU
    onCopySku (info) {
      // console.log('onCopySku', info)
      const t = this
      this.$copyText(info).then(
          function (e) {
            t.$message({
              type: 'success',
              message: '复制成功'
            })
          },
          function (e) {
            t.$message({
              type: 'warning',
              message: '复制失败'
            })
          }
      )
    },
  }
}
</script>

<style scoped lang="scss">
#relation-order-info{
  background-color: #fff;
  padding: 24px 20px;
  margin-bottom: 20px;
}
.order-info{
  p{display: inline-block;margin-right: 20px;}
  margin-bottom: 10px;
}
.googs-sku-list, .total{
  background-color: rgba(227,237,255, 0.6);
  padding: 10px;
  font-size: 14px;
}
.googs-sku-list{
  margin-bottom: 10px;

  p{
    span{
      margin-right: 20px;
      display: inline-block;
      &:first-child{
        color: #ffffff;
        background-color: #0b7df3;
        text-align: center;
        width: 24px;
        height: 24px;
        line-height: 24px;
        border-radius: 50%;
        margin-right: 10px;
      }
      &:nth-child(2){
        min-width: 100px;
      }
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .nothing{
    text-align: center;
  }
}
.total{

  span{
    color: #0b7df3;
  }
}
</style>

